<template>
  <div class="app-container">
    <ThemeSwitcher />
    <FontSwitcher />
    <UserDropdown />
    
    <div 
      ref="sidebarRef"
      class="sidebar"
      :class="{ collapsed: isCollapsed }"
      :style="{ width: isCollapsed ? '80px' : `${sidebarWidth}px` }"
    >
      <div class="sidebar-header">
        <h1>{{ isCollapsed ? '金融' : '金融监控系统' }}</h1>
        <p v-if="!isCollapsed">Financial Monitor System</p>
      </div>
      
      <nav class="menu">
        <router-link
          v-for="item in menuItems"
          :key="item.path"
          :to="item.path"
          class="menu-item"
          :title="isCollapsed ? item.label : ''"
          active-class="active"
        >
          <span class="menu-icon">{{ item.icon }}</span>
          <span v-if="!isCollapsed" class="menu-label">{{ item.label }}</span>
        </router-link>
      </nav>
      
      <button class="collapse-btn" @click="toggleSidebar">
        <span class="collapse-icon">{{ isCollapsed ? '▶' : '◀' }}</span>
      </button>
      
      <div 
        v-if="!isCollapsed"
        class="resize-handle"
        @mousedown="startResizing"
      />
    </div>
    
    <div class="main-content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import ThemeSwitcher from './ThemeSwitcher.vue'
import FontSwitcher from './FontSwitcher.vue'
import UserDropdown from './UserDropdown.vue'

const isCollapsed = ref(false)
const sidebarWidth = ref(240)
const isResizing = ref(false)
const sidebarRef = ref<HTMLElement | null>(null)

const menuItems = [
  { path: '/monitor-config', label: '监控配置', icon: '⚙️' },
  { path: '/machines', label: '机器信息', icon: '🖥️' },
  { path: '/database', label: '数据库状态', icon: '💾' },
  { path: '/alarm', label: '监控告警', icon: '⚠️' },
]

const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value
}

const startResizing = (e: MouseEvent) => {
  e.preventDefault()
  isResizing.value = true
}

const handleMouseMove = (e: MouseEvent) => {
  if (!isResizing.value) return
  
  const newWidth = e.clientX
  // 限制最小宽度180px，最大宽度400px
  if (newWidth >= 180 && newWidth <= 400) {
    sidebarWidth.value = newWidth
    // 如果宽度大于100px，自动展开菜单
    if (newWidth > 100 && isCollapsed.value) {
      isCollapsed.value = false
    }
  }
}

const handleMouseUp = () => {
  isResizing.value = false
}

onMounted(() => {
  document.addEventListener('mousemove', handleMouseMove)
  document.addEventListener('mouseup', handleMouseUp)
})

onUnmounted(() => {
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
})
</script>
